<template>
    <view class="redblack">
        <view style="height: 20rpx"></view>
        <view class="redblack-main">
            <view class="redblack-type" style="margin-bottom: 40rpx; justify-content: flex-start">
                <block v-for="(item, index) in tag" :key="index"
                    ><view :class="type == index ? 'on' : ''" @click="tablist(index, item)">{{ item }}</view></block
                >
            </view>
            <cook-type :list="categoryList" @goCook="goCook" :foodCategoryId="cookId.foodCategoryId"></cook-type>
        </view>

        <view class="redblack-main" style="margin: 20rpx auto 0; position: relative">
            <u-scroll-list :indicator="false" style="margin-left: 30rpx">
                <!-- <view class="redblack-type"> <view  :class="type1==-1?'on':''" @click="tablist1(-1)" class="cook-typetitle">全部</view></view> -->
                <view class="redblack-type redactive" v-for="(item, index) in typeList" :key="index">
                    <view :class="type1 == index ? 'on' : ''" @click="tablist1(item.id, index, item.name)">{{
                        item.name
                    }}</view>
                </view>
            </u-scroll-list>
            <block v-for="(item, findex) in foodList" :key="findex">
                <view class="redbloack-item" @click="godetail(item.id)">
                    <image :src="item.coverAbsolute" mode="" style="border-radius: 8rpx"></image>
                    <view class="redblack-right">
                        <view class="right-title">{{ item.name }}</view>
                        <view class="right-bifo">
                            <block v-if="item.foodHighFiber > 0">
                                高纤维：{{ item.foodHighFiber }}g <text>|</text>
                            </block>
                            <block v-if="item.foodLowGi > 0"> 低GI：{{ item.foodLowGi }} <text>|</text> </block>
                            <block v-if="item.foodHighProtein > 0"> 高蛋白：{{ item.foodHighProtein }}g </block>
                        </view>
                    </view>
                </view>
            </block>

            <u-loadmore
                v-if="more"
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="20"
                marginBottom="30"
            ></u-loadmore>
            <!-- 内容为空 -->
            <view class="redblack-empty" v-if="foodList.length == 0 && isloading == false">
                <image
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png"
                    mode=""
                ></image>
                <text>该分类下暂无食品</text>
            </view>
        </view>
        <view style="height: 40rpx"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            empty: false,
            tag: ["推荐食用", "谨慎食用"],
            typeList: [],
            foodList: [],
            categoryList: [],
            type: 0,
            type1: 0,
            isloading: false,
            total: 0,
            cookId: {
                foodCategoryId: 0,
                foodTypeId: 0,
                type: 0,
                pageNum: 1,
                pageSize: 20,
                orderByColumn: "orderNum",
                isAsc: "desc",
            },
            title1: "推荐食用",
            title2: "",
            title3: "",
            status: "loadmore",
            more: false,
        };
    },
    onLoad() {
        this.gotypeList();
        this.gocategoryList(0);
    },
    onPullDownRefresh() {
        this.gofoodList(true);
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = "loading";
        this.pageNum = ++this.pageNum;
        this.gofoodList(false);
    },

    methods: {
        gofoodList(isFresh) {
            if (isFresh) {
                this.pageNum = 1;
                this.pageSize = 20;
                this.isloading = true;
            }
            this.request.httpTokenRequest("/mp-api/wx/food/list", this.cookId, "POST", true).then((res) => {
                uni.stopPullDownRefresh();
                this.isloading = false;
                if (res.code == 0) {
                    if (res.data.list && isFresh) {
                        this.foodList = res.data.list;
                    } else {
                        res.data.list.forEach((item) => {
                            this.foodList.push(item);
                        });
                    }
                    if (res.data.total > this.foodList.length) {
                        this.status = "loadmore";
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = "nomore";
                    }
                } else {
                    this.more = false;
                    this.status = "nomore";
                }
            });
        },
        gotypeList() {
            this.request.httpTokenJsonRequest("/mp-api/wx/food/typeList", null, "POST", true).then((res) => {
                if (res.code == 0) {
                    this.typeList = res.data.list;
                    var allType = {
                        id: 0,
                        name: "全部",
                    };
                    this.typeList.unshift(allType);
                    this.title3 = res.data.list[0].name;
                    this.cookId.foodTypeId = res.data.list[0].id;
                }
            });
        },
        gocategoryList(e) {
            this.foodType = e;
            this.request
                .httpTokenJsonRequest(`/mp-api/wx/food/categoryList/${this.foodType}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.categoryList = res.data.list;
                        this.cookId.foodCategoryId = res.data.list[0].id;
                        this.title2 = res.data.list[0].name;
                        this.gofoodList(true);
                        // if(this.cookId.type==0){     }
                    }
                });
        },
        goCook(item) {
            this.foodList = [];
            this.title2 = item.title;
            this.cookId.foodCategoryId = item.id;
            this.gofoodList(true);
        },
        tablist(index, title) {
            this.foodList = [];
            this.gocategoryList(index);
            this.type1 = 0;
            this.type = index;
            this.title1 = title;
            this.cookId.type = index;
        },
        tablist1(id, index, title) {
            this.foodList = [];
            this.type1 = index;
            this.title3 = title;
            this.cookId.foodTypeId = id;
            this.gofoodList(true);
        },
        godetail(id) {
            let title = this.title1 + "-" + this.title2 + "-" + this.title3;

            uni.navigateTo({
                url:
                    "/packageHome/pages/redblack/detail?id=" +
                    id +
                    "&title=" +
                    title +
                    "&typeId=" +
                    this.cookId.foodCategoryId,
            });
        },
    },
};
</script>

<style scoped lang="scss">
.redblack-type {
    margin-left: 10rpx;
}
</style>
